大家好，歡迎來到第二十七天！在 Day 26，我們完成了 iOS 部署的完整自動化流程。今天，我們要分享在 Crew Up 專案開發過程中，如何運用 Cursor AI 編輯器的三大模式（Agent、Plan、Ask）來提升開發效率。
這篇文章不談理論，直接聚焦於實戰操作：如何用 Cursor 規劃功能、自動產生程式碼、產生 Commit Message，以及如何透過 Markdown 文件與 Claude AI 合作。
Cursor AI 編輯器提供三種互補的工作模式，每種都有其最佳使用場景：
適用場景：
使用方式：
快捷鍵: Cmd+Shift+K (Mac) / Ctrl+Shift+K (Windows)
Agent 模式會：
適用場景：
使用方式：
在 Chat 介面選擇 "Plan" 模式
Plan 模式會：
適用場景：
使用方式：
快捷鍵: Cmd+L (Mac) / Ctrl+L (Windows)
或直接在 Chat 介面選擇 "Ask" 模式
Ask 模式會：
假設我們要在 Crew Up 專案中新增「活動收藏」功能。
步驟 1：開啟 Agent Mode
按下 Cmd+Shift+K
步驟 2：下達指令
請在 features/activity/ 中新增收藏功能：
需求：
1. 新增 favorite_activity_usecase.dart
2. 在 Activity entity 增加 isFavorite 欄位
3. 修改 ActivityProvider 支援收藏功能
4. 在 @home/presentation/widgets/activity_card_widget.dart 加入收藏按鈕
請遵循專案的 Clean Architecture 架構
Agent 會自動：
features/activity/domain/usecases/favorite_activity_usecase.dart
features/activity/domain/entities/activity.dart
features/activity/presentation/providers/activity_provider.dart
features/home/presentation/widgets/activity_card_widget.dart
flutter analyze 檢查錯誤這是 Crew Up 專案中實際發生的重構案例。當時我們需要將 Firebase Auth 邏輯解耦，以提升程式碼的可測試性和可維護性。
步驟 1：選擇 Plan Mode
步驟 2：描述重構需求
我想重構 authentication feature，將目前的 Firebase Auth
邏輯抽離成獨立的 datasource，讓未來可以更換其他認證方式。
請提供詳細的重構計畫。
Plan 產生了以下計畫（已成功執行）：
## 重構計畫：Authentication Feature
### 目標
將 Firebase Auth 邏輯抽離，提升可測試性和可替換性
### 影響範圍
- lib/features/auth/data/datasources/
- lib/features/auth/data/repositories/
- lib/features/auth/domain/repositories/
### 執行步驟
#### Step 1: 建立 AuthRemoteDataSource 介面
- 檔案: `auth/data/datasources/auth_remote_datasource.dart`
- 定義抽象介面，包含 signIn, signUp, signOut 等方法
#### Step 2: 實作 FirebaseAuthDataSource
- 檔案: `auth/data/datasources/firebase_auth_datasource.dart`
- 實作 AuthRemoteDataSource 介面
- 將現有的 Firebase Auth 邏輯移至此處
#### Step 3: 修改 AuthRepositoryImpl
- 檔案: `auth/data/repositories/auth_repository_impl.dart`
- 依賴注入 AuthRemoteDataSource
- 移除直接使用 FirebaseAuth 的程式碼
#### Step 4: 更新 Providers
- 檔案: `auth/presentation/providers/auth_provider.dart`
- 確保使用新的抽象層
#### Step 5: 執行測試
- 執行 flutter analyze
- 執行單元測試
是否要執行此計畫？
執行結果：
這個重構計畫已成功執行。現在專案中的 auth_remote_datasource.dart 檔案成功將 Firebase Auth 邏輯封裝起來，大幅提升了程式碼的：
Cursor 可以根據程式碼變更自動產生符合 Conventional Commit 格式的 Commit Message。
步驟 1：完成程式碼修改後，打開 Source Control
步驟 2：點擊 Commit Message 輸入框旁的 ✨ AI 按鈕
步驟 3：Cursor 會分析變更，自動產生 Commit Message
新增功能：
變更內容：
- 新增 favorite_activity_usecase.dart
- 修改 Activity entity，增加 isFavorite 欄位
- 更新 ActivityProvider
AI 自動產生：
feat(activity): add favorite functionality
- Implement FavoriteActivityUsecase
- Add isFavorite field to Activity entity
- Update ActivityProvider to support favorites
可以透過 .cursorrules 檔案告訴 Cursor 專案的 Commit 規範：
# .cursorrules
## Commit Message 規則
請遵循以下 Commit Message 格式：
格式：
<type>(<scope>): <subject>
<body>
Types:
- feat: 新功能
- fix: 修復 bug
- refactor: 重構
- docs: 文件更新
- style: 程式碼格式調整
- test: 測試相關
- chore: 建置或輔助工具變動
範例：
feat(auth): add social login functionality
fix(ui): resolve button alignment on iOS
refactor(data): optimize database query performance
這是 Crew Up 專案中最常用的工作流程：先用 Markdown 規劃，再讓 AI 實作。
步驟 1：用 Ask Mode 產生規劃文件
輸入：「我想新增一個通知系統，請幫我規劃這個功能的實作方案，並寫成 Markdown 文件。」
步驟 2：儲存並用 Agent Mode 實作
輸入：「請根據 @notification-system-plan.md 這份文件，實作 Phase 1: Domain Layer。」
Agent 會自動讀取 Markdown 文件，依照規劃建立檔案、實作程式碼，並執行 flutter analyze 檢查。完成 Phase 1 後，繼續執行 Phase 2、Phase 3...
✅ 清晰的規劃：Markdown 文件成為實作的藍圖
✅ 分階段執行：避免一次產生過多程式碼
✅ 易於審查：可以先審查規劃再實作
✅ 團隊合作：其他人也能理解開發思路
Cursor 基於 VS Code 改造，因此可以安裝 VS Code 的擴充功能。我們可以在 Cursor 中同時使用原生 AI 功能和 Claude Code 擴充功能，讓兩個 AI 互相配合，發揮各自的優勢。
為什麼需要兩個 AI 功能？
雖然 Cursor 本身就提供了強大的 AI 功能（可以選擇不同的 AI 模型），但考量到實際使用情境：
在 Crew Up 專案開發中，我們同時訂閱了 Cursor Pro 和 Claude Pro，透過策略性地使用兩個 AI 功能，達到最佳的開發效率和成本效益。
擴充功能資訊：
安裝方式：
1. 開啟 Cursor（或 VS Code）
2. 前往 Extensions (Cmd+Shift+X)
3. 搜尋 "Claude Code for VS Code"
4. 點擊 Install
主要功能：
🎯 推薦工作流程（基於使用量管理）：
階段一：架構規劃（使用 Cursor Pro 額度）
階段二：細節開發（使用 Claude Code Pro）
階段三：整合與提交（使用 Cursor Pro 額度）
💡 實際經驗分享：
在 Crew Up 專案開發中，同時訂閱 Cursor Pro 和 Claude Pro 的策略讓我們能夠：
📊 使用量分配建議：
| 開發階段 | 使用工具 | 使用量佔比 | 說明 |
|---|---|---|---|
| 架構規劃 | Cursor Pro | 20% | 使用 Plan Mode 和 Agent Mode |
| 日常開發 | Claude Code Pro | 60% | 程式碼補全、細節實作 |
| 整合提交 | Cursor Pro | 20% | Agent Mode、Commit 產生 |
這種分配方式讓 Cursor Pro 的額度用在刀口上，同時保持高效的開發節奏。
提供清晰上下文：明確說明檔案位置、使用的元件、樣式要求等
分步驟執行：大型功能分成 Domain → Data → Presentation 三階段實作
遵循專案規範：使用 .cursorrules 和 analysis_options.yaml 確保程式碼品質
在專案根目錄建立 .cursorrules 檔案告訴 Cursor 專案規範，同時搭配 analysis_options.yaml 進行強制驗證。
💡 實戰應用：Crew Up 專案採用雙重保障機制：
.cursorrules- 告訴 AI 如何產生符合規範的程式碼analysis_options.yaml- 透過 Dart Analyzer 強制驗證程式碼品質這種組合確保 AI 產生的程式碼不僅符合專案標準，還能通過自動化檢查。
# Crew Up 專案規範
## 開始之前必讀 @README.md
**重要**：先閱讀 README.md 瞭解完整架構設計、Global DI 機制、多國語系實作等規範。
## 核心規則
- 遵循 Feature-First Clean Architecture
- 使用 Riverpod 2.0 + Code Generation
- 所有非同步操作使用 Result<T> 包裝
- 使用絕對路徑 package:crew_up/...，禁用相對路徑
- 日誌使用 developer.log，禁用 print
include: package:flutter_lints/flutter.yaml
linter:
rules:
# 與 .cursorrules 對應的核心規則
always_use_package_imports: true # 強制 package: import
prefer_relative_imports: false # 禁用相對路徑
require_trailing_commas: true # 強制尾隨逗號
prefer_const_constructors: true # 優先 const
prefer_final_locals: true # 優先 final
analyzer:
errors:
prefer_relative_imports: error # 相對路徑視為錯誤
| 層面 | .cursorrules | analysis_options.yaml |
|---|---|---|
| 作用時機 | AI 產生程式碼時 | 編譯/分析時 |
| 目的 | 指導 AI 產生符合規範的程式碼 | 強制驗證程式碼品質 |
| 覆蓋範圍 | 架構、命名、業務邏輯規範 | 語法、風格、基礎規則 |
| 執行方式 | AI 理解並遵循 | Dart Analyzer 自動檢查 |
效果：這種雙重機制讓 Crew Up 專案的程式碼品質和一致性大幅提升，AI 產生的程式碼能夠自動通過 flutter analyze 檢查。
💡 關鍵策略：在
.cursorrules加入「開始之前必讀 @README.md」，讓 AI 每次都先理解專案架構，確保產生符合規範的程式碼。
在 Crew Up 專案開發過程中，使用 Cursor + Claude 的效率提升：
| 任務類型 | 傳統開發時間 | 使用 AI 時間 | 效率提升 |
|---|---|---|---|
| 新增 Feature 模組 | 2-3 小時 | 30-45 分鐘 | 70% |
| 重構程式碼 | 4-6 小時 | 1-2 小時 | 60% |
| 撰寫單元測試 | 1-2 小時 | 15-30 分鐘 | 75% |
| 文件維護 | 1 小時 | 10-15 分鐘 | 80% |
| 修復 Bug | 30-60 分鐘 | 10-20 分鐘 | 60% |
總體效率提升：約 3-5 倍
數據說明：以上數據來源於 Crew Up 專案開發過程中的實際經驗與團隊開發日誌中的時程記錄。效率提升百分比為主觀評估，實際效果可能因任務複雜度、開發者經驗、AI 提示品質等因素而有所差異，僅供參考。
在 Crew Up 專案中，我們同時訂閱了 Cursor Pro ($20/月) 和 Claude Pro ($20/月)，總成本 $40/月。
策略性使用：
建議：預算有限可先單訂閱，密集開發期再考慮雙訂閱。對專業或商業專案，雙訂閱的投資非常值得。
透過這篇文章，我們深入探討了 Cursor 的三大模式以及實際的工作流程。關鍵重點回顧：
| 模式 | 使用時機 | 特色 |
|---|---|---|
| Agent | 需要修改多個檔案的實作任務 | 自動執行，直接修改檔案 |
| Plan | 複雜功能需要先規劃再執行 | 提供計畫，審查後執行 |
| Ask | 查詢理解程式碼邏輯 | 僅回答問題，不修改檔案 |
小型功能：Agent Mode → 直接實作 → Commit
中型功能：Plan Mode → 審查計畫 → 分步執行 → Commit
大型功能（雙 AI）：
Cursor Plan (規劃) → Cursor Agent (骨架) →
Claude Code (細節 60%) → Cursor Agent (整合) → Commit
在 Crew Up 專案的開發過程中，透過 Cursor Pro + Claude Pro 的雙訂閱策略，以及合理的使用量管理，讓我們的效率提升了 3-5 倍，同時保持了程式碼品質和穩定的開發節奏。希望這篇實戰指南能幫助大家也建立起高效的 AI 合作開發流程！
明天，我們將進一步探討 Cursor 進階功能與 Figma MCP 整合，學習如何結合 AI 驅動的開發工具和設計自動化，打造完整的設計開發一體化流程。我們會分享 Cursor 獨有的 Composer Mode、@ 符號系統，以及如何與 Figma MCP 完美整合。
期待與您在 Day 28 相見！
iThome鐵人賽
看影片追技術
看更多